<template>
  <div class="container">
    <div class="header">
      <div class="title">水上桥区管控</div>
      <div class="menu">
        <div class="item active">总体概况</div>
        <div class="item" @click="router.push({ path: '/szsyBridgeManage' })">桥区日常管理</div>
      </div>
    </div>
    <div class="main">
      <div class="left-content">
        <div class="count">
          <div class="left-part">
            <div class="item" style="border-bottom: 1px solid #f0f0f0;">
              <div class="top">
                <img src="../../assets/images/pc/hdlcs-icon.png" alt="">
                <div class="name">航道里程数(公里)</div>
                <div class="value">{{ bgAndWyData.hdMile || "--" }}</div>
              </div>
              <div class="bottom">
                <div class="bottom-item">
                  <div class="name">高等级</div>
                  <div class="value">{{ bgAndWyData.hdHighLevel || "--" }}</div>
                </div>
                <div class="bottom-item">
                  <div class="name">等级</div>
                  <div class="value">{{ bgAndWyData.hdOtherLevel || "--" }}</div>
                </div>
              </div>
            </div>
            <div class="item" style="padding-top: 19px;">
              <div class="top">
                <img src="../../assets/images/pc/sycbll-icon.png" alt="">
                <div class="name">上月船舶流量(艘)</div>                
              </div>
              <div class="bottom">
                <div class="bottom-item">
                  <div class="name">高等级</div>
                  <div class="value">{{ getCbllData.high || "--" }}</div>
                </div>
                <div class="bottom-item">
                  <div class="name">等级</div>
                  <div class="value">{{ getCbllData.other || "--" }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-part">
            <div class="top">
              <img src="../../assets/images/pc/qlzs-icon.png" alt="">
              <div class="name">桥梁总数(座)</div>
              <div class="value">{{ bgAndWyData.totalBridge || "--" }}</div>
            </div>
            <div class="bottom">
              <div class="name">高等级航道</div>
              <div class="value">{{ bgAndWyData.bgHighLevel || "--" }}</div>
            </div>
            <div class="bottom">
              <div class="name">等级航道</div>
              <div class="value">{{ bgAndWyData.bgOtherLevel || "--" }}</div>
            </div>
            <div class="bottom">
              <div class="name">高等级航道<span style="color: #28CE8E;">(净空达标)</span></div>
              <div class="value" style="color: #28CE8E;">{{ bgAndWyData.bgDabiaoHighLevel || "--" }}</div>
            </div>
            <div class="bottom">
              <div class="name">高等级航道<span style="color: #F13939;">(净空不达标)</span></div>
              <div class="value" style="color: #F13939;">{{ bgAndWyData.bgNoDabiaoHighLevel || "--" }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="title">
          <div class="name">筛选</div>
        </div>
        <div class="filter">
          <div class="filter-item">
            <div class="name">内河高等级航道</div>
            <el-checkbox-group
              v-model="checkedValues1"  
              @change="handleChange()"
            >
              <el-checkbox
                v-for="item in options1"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>          
          <div class="filter-item">
            <div class="name">内河4-7等级航道</div>
            <el-checkbox-group
              v-model="checkedValues2"
              @change="handleChange()"                                 
            >
              <el-checkbox
                v-for="item in options2"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="filter-item">
            <div class="name">内河等外航道</div>
            <el-checkbox
              v-model="nhdwhd"  
              @change="handleChange()"
              border         
            >
              内河等外航道
            </el-checkbox>
          </div>
          <div class="filter-item">
            <div class="name">通航净高达标情况</div>
            <el-checkbox-group
              v-model="checkedValues3"      
              @change="handleChange()"                           
            >
              <el-checkbox
                v-for="item in options3"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="filter-item">
            <div class="name">事故桥梁</div>
            <el-checkbox-group
              v-model="checkedValues4"   
              @change="handleChange()"                              
            >
              <el-checkbox
                v-for="item in options4"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div> -->
        <div class="title">
          <div class="name">桥梁事故情况</div>
          <el-select
            v-model="accident"
            size="small"
            placeholder="请选择"
            @change="accidentChange()"
            style="width: 200px;"                   
          >
            <el-option
              v-for="item in accidentOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="bridge-accident">
          <div v-if="accidentData.length">
            <div class="bridge-accident-item" v-for="(item,index) in accidentData" :key="index">
              <div class="top-part">
                <div class="name">{{ item.name }}</div>
                <div class="value">{{ item.value }}</div>
              </div>
              <div class="bottom-part">
                <el-progress :percentage="item.progress" color="#0051FF" :show-text="false"></el-progress>
              </div>
            </div>
          </div>
          <div class="no-data" v-else>暂无数据</div>
        </div> 
        <div class="title">
          <div class="name">辖区事故概况</div>
          <el-select
            v-model="year"
            placeholder="请选择年份"  
            size="small" 
            @change="yearChange" 
            style="width: 200px;"             
          >
            <el-option
              v-for="item in yearOptions"
              :key="item.year"
              :label="item.year"
              :value="item.year"
            />
          </el-select>
        </div>
        <div class="recently">  
          <div class="recently-item">
            <div style="margin-bottom: 24px;">
              <div class="name">事故总数</div>
              <div class="value">{{ accidentTotal }}</div>
            </div>
            <div>
              <div class="name">最近事故时间</div>
              <div class="value">{{ recentTime }}</div>
            </div>
          </div>        
          <div id="first-chart" style="height: 200px;width: 50%;"></div>
        </div>
      </div>
      <div class="middle-content">
        <OlArc ref="OlArcRef"></OlArc>
        <div class="legend">          
          <div class="legend-item">
            <img src="../../assets/images/big-screen/jg-budabiao.png" alt="">
            <div>净高不达标桥梁</div>
          </div>  
          <div class="legend-item">
            <img src="../../assets/images/big-screen/jg-dabiao.png" alt="">
            <div>净高达标桥梁</div>
          </div>   
          <div class="legend-item"> 
            <img src="../../assets/images/big-screen/hidden-trouble.png" alt="">
            <div>隐患桥梁</div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="area" @click="router.push({ path: '/szsyZhongshanIndex' })">
          <div class="name">
            <img src="../../assets/images/pc/zsxxsfq-icon.png" alt="">
            <div>中山先行示范区</div>
          </div>
          <img src="../../assets/images/pc/more-icon.png" style="padding-right: 16px;">      
        </div>
        <div class="title">
          <div class="name">筛选</div>
        </div>
        <div class="filter">
          <div class="filter-item">
            <div class="name">内河高等级航道</div>
            <el-checkbox-group
              v-model="checkedValues1"  
              @change="() => { hiddenTrouble = false; handleChange(); }"
            >
              <el-checkbox
                v-for="item in options1"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>          
          <div class="filter-item">
            <div class="name">内河4-7等级航道</div>
            <el-checkbox-group
              v-model="checkedValues2"
              @change="() => { hiddenTrouble = false; handleChange(); }"                                 
            >
              <el-checkbox
                v-for="item in options2"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="filter-item">
            <div class="name">内河等外航道</div>
            <el-checkbox
              v-model="nhdwhd"  
              @change="() => { hiddenTrouble = false; handleChange(); }"
              border         
            >
              内河等外航道
            </el-checkbox>
          </div>
          <div class="filter-item">
            <div class="name">通航净高达标情况</div>
            <el-checkbox-group
              v-model="checkedValues3"      
              @change="() => { hiddenTrouble = false; handleChange(); }"                           
            >
              <el-checkbox
                v-for="item in options3"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="filter-item">
            <div class="name">事故桥梁</div>
            <el-checkbox-group
              v-model="checkedValues4"   
              @change="() => { hiddenTrouble = false; handleChange(); }"                            
            >
              <el-checkbox
                v-for="item in options4"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="filter-item">
            <div class="name">隐患桥梁</div>
            <el-checkbox
              v-model="hiddenTrouble"  
              @change="hiddenTroubleFn()"
              border         
            >
              隐患桥梁
            </el-checkbox>
          </div>
        </div>
        <div class="title">
          <div class="name">隐患桥梁情况</div>
        </div>
        <div class="hidden-trouble">
          <div class="bridge-accident">
            <div v-if="cityDivisionData.length">
              <div class="bridge-accident-item" v-for="(item,index) in cityDivisionData" :key="index">
                <div class="top-part">
                  <div class="name">{{ item.city }}</div>
                  <div class="value">{{ item.cityNumber }}</div>
                </div>
                <div class="bottom-part">
                  <el-progress :percentage="item.cityNumber" color="#0051FF" :show-text="false"></el-progress>
                </div>
              </div>
            </div>
            <div class="no-data" v-else>暂无数据</div>
          </div>
          <div id="second-chart" style="height: 210px;"></div>
        </div>
        <!--<div class="title">
          <div class="name">辖区事故概况</div>
          <el-select
            v-model="year"
            placeholder="请选择年份"  
            size="small" 
            @change="yearChange"              
          >
            <el-option
              v-for="item in yearOptions"
              :key="item.year"
              :label="item.year"
              :value="item.year"
            />
          </el-select>
        </div>
        <div class="recently">  
          <div class="recently-item">
            <div style="margin-bottom: 24px;">
              <div class="name">事故总数</div>
              <div class="value">{{ accidentTotal }}</div>
            </div>
            <div>
              <div class="name">最近事故时间</div>
              <div class="value">{{ recentTime }}</div>
            </div>
          </div>        
          <div id="first-chart" style="height: 200px;width: 50%;"></div>
        </div>        
        <div class="title">
          <div class="name">事故列表</div>
        </div>
        <div class="table">
          <el-table :data="tableData" height="252">  
            <el-table-column label="事故桥梁" width="100">
                <template #default="scope">
                  <div 
                    @click="chooseBridge(scope.row)"
                    style="color: #0051FF;cursor: pointer;"
                  >
                    {{ scope.row.accidentBg }}
                  </div>
                </template>
              </el-table-column>       
            <el-table-column prop="accidentShip" label="事故船舶" width="90" />    
            <el-table-column prop="accidentHd" label="事故航道" width="100" />    
            <el-table-column prop="accidentLevel" label="事故等级" width="80" />    
            <el-table-column prop="happenDate" label="发生时间" width="100" />         
          </el-table>
        </div>
        <div class="title">
          <div class="name">{{ accidentBridge }}事故</div>
        </div>
        <div class="accident">
          <div class="radio-group">
            <el-radio-group v-model="radio">
              <el-radio-button label="事故简报" value="事故简报" />
              <el-radio-button label="现场视频" value="现场视频" />
              <el-radio-button label="新闻资讯" value="新闻资讯" />                                          
            </el-radio-group>
          </div>
          <div class="info" v-show="radio === '事故简报'">
            <div class="info" v-html="accidentInfo"></div>
          </div>
          <div class="video" v-show="radio === '现场视频'">
            <video 
              :src="videoUrl"
              autoplay
              controls
              muted
              width="424" 
              height="180"
            ></video>
          </div>
          <div class="new-list" v-show="radio === '新闻资讯'">
            <div 
              class="new-item"
              v-for="(item,index) in news" 
              :key="index"
              @click="handleGo(item.accidentNewsUrl)"
            >
              {{ item.accidentBg }}
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();

  //引入Echarts
  import * as echarts from 'echarts/core';
  import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent } from 'echarts/components';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

  //引入接口
  import {
    getBgAndWy, //整体情况
    getCbll, //上月船舶流量
    rammedBridge, //桥梁事故情况
    getYearList, //事故案例情况获取年份
    acciSit, //事故案例情况详情
    acciInfo, //事故简报/新闻资讯
    acciVideo, //现场视频
    cityDivision, //隐患桥梁情况-地市划分
    regionDivision, //隐患桥梁情况-流域划分
  } from "@/bridge-h5/utils/bridgeAreaControlApi";

  //地图
  import OlArc from "./olArcBridge.vue";
  const OlArcRef = ref(null); 

  //整体情况
  const bgAndWyData = ref({});
  const getBgAndWyFn = () => {
    getBgAndWy().then((res) => {
      if (res.code === 200 && res.data) {
        bgAndWyData.value = res.data;
      }
    })
  };
  const getCbllData = ref({});
  const getCbllFn = () => {
    getCbll().then((res) => {
      if (res.code === 200 && res.data) {
        getCbllData.value = res.data;
      }
    })
  };

  //筛选
  const checkedValues1 = ref([]);
  const options1 = ["一级","二级","三级"];
  const checkedValues2 = ref([]);
  const options2 = ["四级","五级","六级","七级"];
  const nhdwhd = ref(false);
  const checkedValues3 = ref([]);
  const options3 = ["达标","不达标"];
  const checkedValues4 = ref([]);
  const options4 = ["近三年被撞桥梁","近一年被撞桥梁"];
  const hiddenTrouble = ref(false);
  const hiddenTroubleFn = () => {
    if(hiddenTrouble.value){
      checkedValues1.value = [];
      checkedValues2.value = [];
      nhdwhd.value = false;
      checkedValues3.value = [];
      checkedValues4.value = [];
    }
    handleChange();
  };
  const handleChange = () => {   
    let arr = checkedValues1.value.concat(checkedValues2.value);
    let isDabiao = [];
    let isAccident = [];
    if(nhdwhd.value === true){
      arr.push("八级");
    };
    checkedValues3.value.forEach((item) => {
      if(item == "达标"){
        isDabiao.push(0);
      }else if(item == "不达标"){
        isDabiao.push(1);
      }
    });
    checkedValues4.value.forEach((item) => {
      if(item == "近三年被撞桥梁"){
        isAccident.push(3);
      }else if(item == "近一年被撞桥梁"){
        isAccident.push(1);
      }
    });
    OlArcRef.value.getPosInfoFn(
      {
        level: arr.join(','),
        isDabiao: isDabiao.join(','),
        isAccident: isAccident.join(',')      
      },
      hiddenTrouble.value,
    );
  };

  //桥梁事故情况
  const accident = ref(3);
  const accidentOptions = [
    { name: "近三年被撞桥梁", value: 3 },
    { name: "近一年被撞桥梁", value: 1 },
  ];
  const accidentData = ref([]);
  const rammedBridgeFn = () => {
    rammedBridge({
      isAccident: accident.value
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        accidentData.value = [];
        res.data.forEach((item) => {
          let obj = {
            name: item.bridgeName,
            value: item.times
          };
          if(item.times === 3){
            obj.progress = 100;
          }else if(item.times === 2){
            obj.progress = 66;
          }else if(item.times === 1){
            obj.progress = 33;
          }
          accidentData.value.push(obj);
        });       
      }else{
        accidentData.value = [];
      }
    });
  };
  const accidentChange = () => {
    rammedBridgeFn();
  };

  //事故案例情况
  const year = ref("全部");
  const yearOptions = ref([]);
  const tableData = ref([]);
  const accidentTotal = ref(0);
  const recentTime = ref("");
  const accidentBridge = ref("");
  const radio = ref("事故简报");
  const accidentInfo = ref('');
  const news = ref([]);
  const getYearListFn = () => {
    getYearList().then((res) => {
      if(res.code === 200){
        res.data.unshift({year: "全部"});
        yearOptions.value = res.data;
        acciSitFn();
      }
    });
  };
  const yearChange = () => {
    acciSitFn();
  };
  const acciSitFn = () => {
    acciSit({
      year: year.value === "全部"? "" : year.value
    }).then((res) => {
      if(res.code === 200){
        tableData.value = res.data.accidentList;
        accidentTotal.value = res.data.accidentTotal;
        recentTime.value = res.data.recentTime;
        accidentBridge.value = res.data.accidentList[0].accidentBg;
        acciInfoFn();
        acciVideoFn();
        let accidentData = [];
        res.data.group.forEach((item,index) => {
          let obj = {
            name: item.accidentLevel,
            value: item.count,
          };
          accidentData.push(obj);
        });    
        initFirstChart(accidentData);    
      }
    });
  };  
  const initFirstChart = (accidentData) => {
    nextTick(() => {
      let pieChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
      if(pieChart != null && pieChart != "" && pieChart != undefined){
        pieChart.dispose();
      }
      pieChart = echarts.init(document.getElementById('first-chart'));
      let option = {      
        title: {
          text: accidentTotal.value,
          subtext: "事故总数",
          textStyle: {
            color: "#262626",
            fontSize: 24,
            align: "center",
          },
          subtextStyle: {
            fontSize: 12,
            color: "#595959",
          },
          x: "center",
          y: "35%",
        },      
        legend: {   
          type: 'scroll',     
        },    
        tooltip: {
          trigger: 'item',
          confine: true, //限制在图表区域内   
        },     
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,          
            },
            labelLine: {
              show: true, //标签连接线
            },  
            data: accidentData
          }
        ],          
      };
      option && pieChart.setOption(option);
    }); 
  };
  const chooseBridge = (row) => {
    accidentBridge.value = row.accidentBg;
    setTimeout(() => {
      acciInfoFn();
      acciVideoFn();
    }, 500);    
  };
  const acciInfoFn = () => {
    acciInfo({
      bridge: accidentBridge.value
    }).then((res) => {
      if(res.code === 200){
        accidentInfo.value = res.data.accidentInfo;
        news.value = res.data.news;
      }
    });    
  };
  const handleGo = (url) => {
    window.location.href = url;
  };
  const videoUrl = ref('');
  const acciVideoFn = () => {
    acciVideo({
      bridge: accidentBridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        videoUrl.value = `${import.meta.env.VITE_APP_BASE_API}${res.data[0].url}`;
      }else{
        videoUrl.value = "";
      }
    });
  };

  //隐患桥梁情况
  const cityDivisionData = ref([]);
  const cityDivisionFn = () => {
    cityDivision().then((res) => {
      if(res.code === 200 && res.data.length){
        cityDivisionData.value = res.data;
      }
    });
  };
  const regionDivisionFn = () => {
    regionDivision().then((res) => {
      if(res.code === 200){
        let regionDivisionData = [];
        res.data.forEach((item,index) => {
          let obj = {
            name: item.region,
            value: item.regionNumber,
          };
          regionDivisionData.push(obj);
        });    
        initSecondChart(regionDivisionData);  
      }
    });
  };
  const initSecondChart = (regionDivisionData) => {
    nextTick(() => {
      let pieChart = echarts.getInstanceByDom(document.getElementById("second-chart"));
      if(pieChart != null && pieChart != "" && pieChart != undefined){
        pieChart.dispose();
      }
      pieChart = echarts.init(document.getElementById('second-chart'));
      let option = {            
        legend: {   
    
        },    
        tooltip: {
          trigger: 'item',
          confine: true, //限制在图表区域内   
        },     
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,          
            },
            labelLine: {
              show: true, //标签连接线
            },  
            data: regionDivisionData
          }
        ],          
      };
      option && pieChart.setOption(option);
   
    }); 
  };

  onMounted(() => {
    document.title = "水上桥区管控";
    getBgAndWyFn();
    getCbllFn();
    rammedBridgeFn();
    getYearListFn();
    cityDivisionFn();
    regionDivisionFn();
  });
</script>

<style lang="scss" scoped>
  @font-face{
    font-family: Din;
    src: url("../../assets/fonts/din.ttf");
  }
  @font-face{
    font-family: Tx;
    src: url("../../assets/fonts/tx.ttf");
  }
  .container{    
    width: 2560px;
    height: 1660px;
    box-sizing: content-box;
    .header{
      height: 40px;    
      display: flex;
      align-items: center;  
      justify-content: space-between; 
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
      border-radius: 4px;  
      margin: 16px 16px 0px 16px; 
      padding: 0 16px;
      .title{
        font-family: 'Tx';
        font-weight: 500;
        font-size: 18px;
        color: #262626;
      }
      .menu{
        display: flex;
        align-items: center;
        .item{
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          padding: 6px 18px;
          border-radius: 4px;
        }
        .active{
          color: #FFFFFF;
          background: #0051FF;
        }
      }
    }
    .main{
      box-sizing: content-box;
      height: 1604px;
      margin: 16px;      
      display: flex;
      .left-content{ 
        width: 614px;
        height: 1572px;              
        box-sizing: content-box;
        .count{       
          height: 272px;
          box-sizing: content-box;   
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 4px; 
          display: flex;  
          margin-bottom: 16px; 
          .left-part{    
            padding: 0px 20px 0px 16px;
            margin: 36px 0px 16px 0px;
            border-right: 1px solid #f0f0f0;
            .item{              
              .top{
                display: flex;
                align-items: center;
                img{
                  width: 18px;
                  height: 18px;
                  padding-right: 4px;
                }
                .name{
                  font-weight: 400;
                  font-size: 16px;
                  color: #595959;
                  padding-right: 16px;
                }
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 16px;
                  color: #0051FF;
                }
              }
              .bottom{
                display: flex;
                justify-content: space-between;
                margin: 9px 55px 16px 0px;
                .bottom-item{
                  .name{
                    font-weight: 400;
                    font-size: 16px;
                    color: #595959;
                  }
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 16px;
                    color: #262626;
                  }
                }
              }
            }
          }             
          .right-part{
            // padding: 25px 0px 25px 35px;  
            padding: 40px 0px 40px 35px;            
            .top{
              display: flex;
              align-items: center;
              margin-bottom: 17px;
              img{
                width: 18px;
                height: 18px;
                padding-right: 4px;
              }
              .name{
                font-weight: 400;
                font-size: 16px;
                color: #595959;
                padding-right: 16px;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 16px;
                color: #0051FF;
              }
            }
            .bottom{
              display: flex;
              align-items: center;
              margin-bottom: 16px;
              .name{
                font-weight: 400;
                font-size: 16px;
                color: #595959;
                padding-right: 16px;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 16px;
                color: #262626;

              }
            }
          }
        }
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);          
          padding: 0 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name{
            font-weight: 500;
            font-size: 18px;
            color: #262626;
          }
        }
        .filter{
          height: 336px;
          box-sizing: content-box;    
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px;   
          margin-bottom: 16px;
          .filter-item{
            margin: 0px 16px;
            padding: 6px 0;
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #595959;   
              margin-bottom: 4px;        
            }
          }          
        }
        .bridge-accident{
          height: 672px;
          overflow: auto;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px;
          margin-bottom: 16px;
          .bridge-accident-item{
            margin: 16px;
            .top-part{
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;
              .name{
                font-weight: 400;
                font-size: 16px;
                color: #595959;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 18px;
                color: #0051FF;
              }
            }
          }
          .no-data{
            display: flex;
            justify-content: center;
            line-height: 278px;
            color: #595959;
            font-size: 18px;
            font-weight: bold;
          }
        }
        .recently{
          height: 500px;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          .recently-item{
            width: 50%;
            padding-left: 50px;
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #262626;
              padding-bottom: 4px;
            }
            .value{
              font-family: 'Din';
              font-weight: bold;
              font-size: 24px;
              color: #262626;
            }
          }
        }
      }
      .middle-content{
        width: 1268px;   
        height: 1572px;   
        margin: 0 16px;
        box-sizing: content-box;
        position: relative;
        .legend{
          width: 196px;
          height: 126px;
          background: rgba(5,48,68,0.8);
          border-radius: 0px 0px 0px 0px;
          border: 1px solid rgba(120,223,255,0.4);  
          position: absolute;
          top: 16px;
          right: 16px; 
          .legend-item{
            display: flex;        
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
            margin: 16px 0px 16px 16px;
            img{
              width: 20px;
              height: 20px;
              padding-right: 4px;                
            }
          }
        }
      }
      .right-content{  
        width: 614px;
        height: 1572px;
        box-sizing: content-box;
        .area{
          height: 44px;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 4px;
          line-height: 44px;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name{
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 18px;
            color: #262626;
            img{
              width: 20px;
              height: 20px;
              padding: 0px 8px 0px 16px;
            }
          }
        } 
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);          
          padding: 0 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name{
            font-weight: 500;
            font-size: 18px;
            color: #262626;
          }
        }
        .recently{
          height: 252px;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          .recently-item{
            width: 50%;
            padding-left: 50px;
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #262626;
              padding-bottom: 4px;
            }
            .value{
              font-family: 'Din';
              font-weight: bold;
              font-size: 24px;
              color: #262626;
            }
          }
        }
        .table{
          height: 252px;
          margin-bottom: 16px;
        }
        .accident{
          height: 252px;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px;
          .radio-group{
            text-align: center;
            padding: 16px 0;
          }
          .info{
            height: 180px;
            overflow-y: auto;
            margin: 0 8px 0 16px;
          }
          .video{
            text-align: center;
          }
          .new-list{
            height: 180px;
            overflow-y: auto;
            margin: 0 16px;
            .new-item{              
              font-weight: 500;
              font-size: 16px;
              color: #0051FF;
              padding: 16px 0;
              cursor: pointer;
              border-bottom: 1px solid #f0f0f0;
            }
          }
        }
        .filter{
          height: 600px;
          box-sizing: content-box;    
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px;   
          margin-bottom: 16px;
          .filter-item{
            margin: 0px 16px;
            padding: 16px 0;
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #595959;   
              margin-bottom: 4px;        
            }
          }          
        }
        .hidden-trouble{
          height: 800px;
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
          border-radius: 0px 0px 4px 4px; 
          .bridge-accident{
            height: 590px;
            overflow: auto;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
            border-radius: 0px 0px 4px 4px;
            margin-bottom: 16px;
            .bridge-accident-item{
              margin: 16px;
              .top-part{
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
                .name{
                  font-weight: 400;
                  font-size: 16px;
                  color: #595959;
                }
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 18px;
                  color: #0051FF;
                }
              }
            }
            .no-data{
              display: flex;
              justify-content: center;
              line-height: 278px;
              color: #595959;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
</style>